<template>
  <div>
    <h1>{{this.title}}</h1>
    <div class="slot_container">
       <slot name="name"></slot>
    </div>
    <div class="id_slot_container">
      <slot name="id"></slot>
    </div>
    <div class="scope_slot_container">
      <slot name="scope" :title="this.title"></slot>
    </div>
  </div>
</template>

<script>
export default {
  /**
   * props默认值
   */
  props:{
    title:{
      type:String,//限制传递数据类型
      // default:"我是一个默认标题",//默认值
      required:true,//是否为必须设置/传递
      validator:function(value){//props验证函数
        return value.length < 20
      }
    }
  }
}
</script>

<style scoped>
.slot_container
{
  width: 100px;
  height: 50px;
  border: 1px solid red;
}

.id_slot_container
{
  width: 100px;
  height: 50px;
  border: 1px solid blue;
}

.scope_slot_container
{
  width: 200px;
  height: 120px;
  border: 1px solid pink;
}
</style>